<template>
  <div class="mv-list">
	<el-row>
		<el-col :span="4.2" v-for="(item,index) in mvList" :key="index" class="mv-list-flex">
			<div class="artist-img" v-if="item.type==null"  @click="mvHandle(item.id)">
				<el-image
				      style="width: 180px; height: 100px"
				      :src="item.cover"
					  
				      ></el-image>
			    <i class="iconfont icon-shipin"></i>
				<span style="font-size: 14px;">{{item.playCount}}</span>
			</div>
			<div class="artist-img" v-else @click="mvHandle(item.id)">
				<el-image
				      style="width: 180px; height: 100px"
				      :src="item.picUrl"
				      ></el-image>
			    <i class="iconfont icon-shipin"></i>
				<span style="font-size: 14px;">{{item.playCount | formatNum}}</span>
			</div>
			<div style="font-size: 14px; white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;width: 180px;">{{item.name}}</div>

		</el-col>
	</el-row>
  </div>
</template>

<script>


export default {
  name:'MvList',
  props:['mvList'],
  data(){
    return{
      
    }
  },
  created(){
	 console.log()
  },
  filters:{
	  formatNum(val){
		  let num = Number(val);
		  if(num == 0){
			  return num + '';
		  }else if(10000>num>0){
			 return num + '';
		  }else {
			  return (num/10000).toFixed(0)
		  }
	  }
  },
  methods:{
     mvHandle(id){
     	this.$router.push({name:'MvDetail',params:{id:id}})
     }
  }
}
</script>

<style lang="less" scoped>
    .mv-list{
		width: 100%;
	}
    .mv-list-flex{
		padding: 12px 10px;
		.artist-img{
			position: relative;
			color: #000000;
			span{
				position: absolute;
				right: 10px;
				top:6px;
				color: #fff;
			}
		    i{
		    	position: absolute;
		    	right: 50px;
		    	top:6px;
		    	color: #fff;
		    }
		}
	}
</style>

